<template>
	<view class="box">
		<view class="header">
			<view class="serch">
				<view class="name">
					<view style="margin-right: 20rpx;">
						<!-- {{name}}({{total}}套) --> {{name}}&#12288({{houseRoomsize || 0 }}套房-{{ total}}间房源)
					</view>
				</view>
				<u-search placeholder="请输入关键字" v-model="searchValue" @custom="searchName" clearabled height="30"
					bgColor="#fff" :actionStyle="{color: '#fff'}"></u-search>
			</view>
			<view class="dataSelect_row">
				<uniDataSelect :localdata="houseTypeList" v-model="active" @change="changeType" :clear="false">
				</uniDataSelect>
				<uniDataSelect :localdata="houseAddressList" @change="changeHouseAddress" :clear="false">
				</uniDataSelect>
				<u-button type="primary" text="全部" @click="Reset" class="reset-style"></u-button>
			</view>
			<view class="warning">
				<u--text text="刷新房源，可以让房源排名更靠前!" :bold="true"color="#d50000"></u--text>
				<u-button color="#00aa00" text="一键刷新"size="large"  class="custom-style"
					@click="getFlushed()"></u-button>
			</view>
		</view>
		<u-overlay :show="maskShow" @click="changeMask">
			<view class="option_box">
				<view class="option">
					<u-cell-group>
						<u-cell v-for="(item, index) of list[active || 0].children" :title="item.name"
							@click="sliceHouse(item)"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</u-overlay>
		<view class="module" v-if="leaseList.length != 0 ">
			<view class="module_item" v-for="(fatherItem,fatherIndex) in leaseList" :key="fatherIndex">
				<view class="address_name" style="text-align: left; background-color: #eff3f5; margin-top: 10rpx;">
					{{ fatherItem.communityName }} {{ fatherItem.ventricleList.length}}套
				</view>
				<view class="" v-for="(ventricleTtem,ventricleIndex) in fatherItem.ventricleList" :key="ventricleIndex">
					<view class="address_name">
						{{ ventricleTtem.rentalType == '0' ? '合租' : '整租' }} -
						{{ ventricleTtem.buildingNumber }}幢/栋{{ ventricleTtem.unitNumber }}单元{{ ventricleTtem.ventricleNumber }}室
						<u-icon name="edit-pen" color="#d3cece" size="26"
							@click="editHousePopupMethod(ventricleTtem)"></u-icon>
					</view>

					<view class="childen_card">
						<view class="card" v-for="(childrenTtem,childrenIndex) in ventricleTtem.list"
							:key="childrenIndex" @click="itemDetail(childrenTtem)">
							<view class="tiem">
								<view class="listings">
									<view class="" style="width: 100%; height: 250rpx; ">

										<image
											:src="childrenTtem.mediaUrl ? childrenTtem.mediaUrl : '../../static/default/no_img.png'"
											style="width: 100%; height: 100%;border-radius: 10px;"></image>
									</view>
									<u-line></u-line>
									<view class="address">
										{{childrenTtem.houseRoomName}}
									</view>
									<view class="name">
										<!-- {{childrenTtem.roomNumber ? childrenTtem.roomNumber + '号房间' : '' }}{{childrenTtem.ventricleNumber}}室 -->
										{{ ventricleTtem.rentalType == '0' ? (childrenTtem.roomNumber ? childrenTtem.roomNumber + '号房间' : '房间') : childrenTtem.ventricleNumber + '室'}}
									</view>
									<view class="name" style="font-size: 20rpx;color: #babdbe;">
										{{childrenTtem.floor}}
									</view>
									<view class="money">
										￥{{childrenTtem.rental || '暂未获取'}}
									</view>
									<view class="tag" v-if="childrenTtem.rentState==1&&childrenTtem.hasLease=='无租约'">
										已租-无租约</view>
									<view class="tag" v-if="childrenTtem.rentState==1&&childrenTtem.hasLease!='无租约'">已租
									</view>
									<view class="tag_" v-if="childrenTtem.rentState==0">未租</view>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>
		<view class="empty" v-if="leaseList.length == 0 ">
			<u-empty mode="data" text="暂无数据"></u-empty>
		</view>

		<u-popup :show="showHouse" mode="center" :round="10" @close="showHouse = false">
			<view class="popup">
				<u-cell title="幢/栋" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入幢/栋" v-model="editHouseDetailNumber.buildingNumber" clearable
						type="number" maxlength="3"></u--input>
				</u-cell>
				<u-cell title="单元" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入单元" v-model="editHouseDetailNumber.unitNumber" clearable
						type="number" maxlength="3"></u--input>
				</u-cell>
				<u-cell title="门牌号(室号)" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入门牌号(室号)" v-model="editHouseDetailNumber.ventricleNumber"
						clearable type="number" maxlength="4"></u--input>
				</u-cell>
				<view class="button_box">
					<u-button @click="showHouse = false">取消</u-button>
					<u-button type="primary" class="sure" @tap="confirmHouse">确定</u-button>

				</view>
			</view>
		</u-popup>
		<!-- <u-notify ref="uNotify" message="Hi uView"></u-notify> -->
		<u-toast ref="uNotify"></u-toast>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		getAvailability,
		houseAll,
		getHouseTotal,
		editHouseDetail
	} from '@/api/house/index.js'
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"
	import {
		getLables
	} from "@/api/index.js"
	import {
		getRefresh
	} from '@/api/home/index.js'
	export default {
		data() {
			return {
				value1: "21321",
				showHouse: false,
				value2: "",

				houseTypeList: [{
						value: 0,
						text: "未租"
					},
					{
						value: 1,
						text: "已租"
					},
					{
						value: 2,
						text: "转租中"
					},
				],
				editHouseDetailNumber: '',
				editHouseID: '',
				houseAddressList: [],
				addressID: '',
				show: false,
				maskShow: false,
				active: "",
				searchValue: '',
				value: "",
				total: '0',
				houseRoomsize: '0', //房间数量，如果是整租的不管是几室的都算一间，合租的有几间对应的就是几个房源，几间房的意思
				title: '修改房号',
				name: '',
				list: [{
						title: '已租',
						id: "1"
					},
					{
						title: '未租',
						id: "0"
					},
					{
						title: '转租中',
						id: "2"
					},

				],
				addressNameID: '',
				leaseList: [],
				houseKeyRange: JSON.parse(uni.getStorageSync('houseInfo')).houseKeyRange
			}
		},
		onShow() {
			this.getFunLables();

			this.name = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).nickName : "暂无"

			const rentState = uni.getStorageSync('rentStateParams') ? JSON.parse(uni.getStorageSync('rentStateParams'))
				.rentState : '';

			if (rentState == '') {
				this.active = 0;
			} else {
				this.active = rentState;
			}
			//this.active = rentState;

			this.getHouseAll();
			uni.setStorageSync('rentStateParams', JSON.stringify({
				rentState: ''
			}));
			this.getHouseTotalMethod();

		},

		onLoad(options) {

			const rentState = JSON.parse(uni.getStorageSync('rentStateParams')).rentState;
			if (rentState == '') {
				this.active = 0;
			} else {
				this.active = rentState;
			}



			this.getHouseAll();
			this.getLoseHouse();
			this.getHouseTotalMethod();
			uni.setStorageSync('rentStateParams', JSON.stringify({
				rentState: ''
			}));

			this.name = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).nickName : "暂无"

		},
		components: {
			uniDataSelect
		},

		onPullDownRefresh() {
			this.Reset()
			this.$refs.uNotify.show({
				type: 'success',
				bgColor: '#3c9cff',
				color: '#fff',
				message: '刷新成功',
				duration: 2000,
				fontSize: 15,
			})

		},
		methods: {
			//刷新房源
			async getFlushed() {
				const res = await getRefresh()
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						message: '刷新成功',
						type: 'success'
					})
				} else {
					this.$refs.uToast.show({
						message: '刷新失败',
						type: 'error'
					})
				}
			},
			async getFunLables() {
				const res = await getLables();
				console.log(res);
				if (res.data.code != 200) return uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
				const strong = JSON.parse(uni.getStorageSync('houseInfo'));
				strong.tagNames = res.data.rows
				uni.setStorageSync('houseInfo', JSON.stringify(strong))
			},
			
			editHousePopupMethod(houseInfo) {
				console.log(houseInfo);
				this.editHouseDetailNumber = houseInfo
				this.editHouseID = houseInfo.id
				this.showHouse = true;

			},
			async confirmHouse() {
				if (this.editHouseDetailNumber.buildingNumber == '' || this.editHouseDetailNumber.unitNumber == '' ||
					this.editHouseDetailNumber.ventricleNumber == '') return this.$refs.uToast.show({
					message: '请输入完整内容',
					type: 'error',
					position: "bottom"
				})
				var backList = [];
				this.editHouseDetailNumber.list.map((item, index) => {
					var obj = {
						"houseId": item.id,
						"buildingNumber": this.editHouseDetailNumber.buildingNumber,
						"unitNumber": this.editHouseDetailNumber.unitNumber,
						"ventricleNumber": this.editHouseDetailNumber.ventricleNumber
					}
					backList.push(obj)
				})
				const res = await editHouseDetail({
					houseBuildingInfoDtoList: backList
				});
				this.showHouse = false;
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error',
					position: "bottom"
				})

				this.$refs.uToast.show({
					message: res.data.msg,
					type: 'success',
					position: "bottom"
				})



			},
			async getHouseTotalMethod() {
				const res = await getHouseTotal();
				if (res.data.code != 200) return uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})

				this.total = res.data.data.totalRooms
				this.houseRoomsize = res.data.data.houseRoomsize
			},

			changeType(id) {
				this.active = id;
				this.getHouseAll()
			},
			changeHouseAddress(val) {
				this.addressNameID = val;
				this.getHouseAll()
			},
			async getLoseHouse() {
				this.houseAddressList = []
				const res = await houseAll();
				if (res.data.code != 200) {
					uni.stopPullDownRefresh();
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				} else {
					uni.stopPullDownRefresh();
					if (res.data.rows.legnth == 0) {

					} else {

						res.data.rows.map((item, idnex) => {
							this.houseAddressList.push({
								value: item.id,
								text: item.name
							})
						})
					}
				}

			},

			searchName() {
				this.getHouseAll()
			},
			Reset() {
				this.houseTypeList = [];
				this.houseTypeList = [{
						value: 0,
						text: "未租"
					},
					{
						value: 1,
						text: "已租"
					},
					{
						value: 2,
						text: "转租中"
					},
				]
				this.addressNameID = ""
				this.active = ""
				this.keyword = "";
				this.getLoseHouse()
				this.getHouseAll()
			},
			async getHouseAll() {

				const res = await getAvailability(this.addressNameID, this.active, this.searchValue);
				this.san = res.data.total
				if (res.data.code == 403) return uni.redirectTo({
					url: '/pages/landlord/login',
					success() {
						uni.showToast({
							title: '登录身份异常，请联系管理员!',
							icon: 'none'
						})
						// uni.hideLoading(loadding)
					}
				})
				if (res.data.code != 200) return uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
				this.leaseList = res.data.data;
				this.searchValue = '';
				// this.total = res.data.total
			},
			itemDetail(leaseTtem) {

				this.total = res.data.total
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.leaseList = res.data.data
			},
			itemDetail(leaseTtem) {

				uni.navigateTo({
					url: './availabilityDetail?id=' + leaseTtem.id,
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			changeActive(index, item, active) {

				if (active == 2) {
					this.maskShow = true
				}
			},
			changeMask() {
				this.maskShow = false
				this.active = undefined
			},
			sliceHouse(item) {
				this.addressNameID = item.id;
				this.getHouseAll()
			},
			confirm() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			computedTag() {

			},
			async queryVersion() {
				const res = await getServerAppVersion();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.active {
		color: #3c9cff;
	}

	.popup {
		padding: 30rpx;

		.cue {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
			padding: 40rpx;
		}

		.button_box {
			@include flexBetween;

			.sure {
				margin-left: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}

	.reset-style {
		margin-left: 20rpx;
		width: 20%;
		height: 60rpx;
	}

	.empty {
		padding-top: 280rpx;
	}

	.option_box {
		padding-top: 174rpx;

		.option {
			background-color: #fff
		}
	}

	.modal_box {
		width: 100%;

		.flex {
			padding: 10rpx 0;
			display: flex;
		}
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;

		.header {
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 333;
			background-color: #fff;

			.serch {
				@include flexBetween;
				padding: 20rpx;
				font-size: 28rpx;
				color: #fff;
				font-weight: bold;
				background-color: $theme;
				box-sizing: border-box;

				.name {
					display: flex;
					align-items: center;
				}

			}

			.dataSelect_row {
				padding: 20rpx;
				color: $noimportant;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.warning {
				display: flex;
				align-items: center;
				width: 100%;
				background-color: #fff;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
			
				.custom-style {
					width: 20%;
					height: 60rpx;
				}
			}
		}

		.module {
			font-size: 32rpx;
			padding-top: 180rpx;
			width: 100%;
			min-height: 100vh;
			max-height: 100%;

			.module_item {
				width: 100%;

				.address_name {
					background-color: #fff;
					padding: 20rpx;
					@include flexCenter
				}

				.childen_card {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					width: 100%;
					background-color: #fff;
					padding: 0 5%;
					box-sizing: border-box;

					.card {
						background-color: #fff;
						border-radius: 5rpx;
						margin: 20rpx 0;
						width: 47.5%;

						.card_row {
							display: flex;
							align-items: center;
						}

						.tiem {
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;

							.listings {
								padding: 20rpx;
								box-sizing: border-box;
								width: 100%;
								border-radius: 5%;
								@include boxshadow;

								.address {
									margin-top: 10rpx;
									font-size: 30rpx;
									font-weight: bold;
								}

								.name {
									margin: 10rpx 0;
									font-size: 28rpx;
								}

								.money {
									color: red;
									font-weight: bold;
								}

								.tag {
									color: #fff;
									background-color: #bababa;
									border-radius: 5rpx;
									top: 40rpx;
									z-index: 1;
									width: 60%;
									font-size: 28rpx;
									text-align: center;
									margin-left: auto;
									opacity: 0.8
								}

								.tag_ {
									color: #fff;
									background-color: #4c90ba;
									border-radius: 5rpx;
									top: 40rpx;
									z-index: 1;
									width: 30%;
									font-size: 28rpx;
									text-align: center;
									margin-left: auto;
									opacity: 0.8
								}

								.image {
									width: 100%;
									height: 100%;
									position: relative;
									border-radius: 10rpx;
									margin-bottom: 10rpx;
								}
							}

						}

					}
				}

			}
		}
	}
</style>